<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<script type="text/javascript" src="script/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		$("form :input.inputstyle").each(function(){
			$required = $('<strong class="high">*</strong>');
			$(this).parent().append($required);
		});
		$("form :input").blur(function(){
			var $parent = $(this).parent();
			$parent.find(".formtips").remove();
			//验证用户名
			if($(this).is("#name")){
				if(this.value == "" ||  this.value.length <6){
					var errorMsg = '请输入至少六个字符';
					$parent.append('<span class = "formtips onError">'+errorMsg+'</span>');
				}else{
					var okMsg = '输入正确';
					$parent.append('<span class = "formtips onRight">'+okMsg+'</span>');
				}
			}
			//验证密码
			if($(this).is("#password")){
				if(this.value == "" || (this.value != "" && !/\w{6,15}/.test(this.value))){
					var errorMsg = '密码由6-15个字符组成';
					$parent.append('<span class = "formtips onError">'+errorMsg+'</span>');
				}else{
					var okMsg = '输入正确';
					$parent.append('<span class = "formtips onRight">'+okMsg+'</span>');
				}
			}
		}).keyup(function(){
			$(this).triggerHandler("blur");
		}).focus(function(){
			$(this).triggerHandler("blur");
		});
		$("#btn_dl").click(function(){
			$("form :input.inputstyle").trigger("blur");
			var numError = $("form .onError").length;
			if(numError){
				return false;
			}
			var name = $('#name').val();
			var password = $('#password').val();
			jQuery.getJSON("user!loginAjax",{"name":name,'password':password},function(json){
				var id = json.id;
				var name = json.name;
				var password = json.password;
				$(".btnarea").remove();
				$(".zctxz").remove();
				$(".tjgn").remove();
				var liNode = '<li class="name"><span>欢迎你， '+name+'</span></li>';
				$(".name").replaceWith(liNode);
				liNode2 = '<li class="password" style="padding-left:500px;text-align:center;"><span><a href="user!usercenter?id='+id+'">个人中心</a></span></li>';
				$(".password").replaceWith(liNode2);
				liNode3 = '<li class="name" style="padding-left:0px"><span><a style="color:red;" href="index!exit">安全退出</a></span></li></ul>';
				$(".zddl").replaceWith(liNode3);
			});	
		});
	});
</script>
<!-- 顶端开始 -->
	<c:choose>
		<c:when test="${empty sessionScope.user}">		
    	<form method="post" name="login" action="#">
        	<div class="topbar">
         	<div class="inner">
            	<ul class="dlarea">
                	<li class="name">
                    	<span>昵称</span>
                        <input class="inputstyle" type="text" id="name" name="name" />
                    </li>
                    <li class="password">
                    	<span>密码</span>
                        <input type="password" class="inputstyle" id="password" name="password" />
                    </li>
                    <li class="zddl">
                    	<input class="checkboxstyle" type="checkbox" value="1" name="auto_login" />
                        <span>自动登录</span>
                   </li>
                    <li class="btnarea"><input type="button" id="btn_dl" class="btnstyle" value="登录"></li>
                    <li class="zctxz"><a href="index!reg">注册通行证</a></li>
                	</ul>
                <ul class="tjgn">
                	<li class="jrsc">
                    	<a href="#">加入收藏</a>
                    </li>
                </ul>
            </div>
           </div>
        </form>
        </c:when>
        <c:otherwise>
        <div class="topbar">
         	<div class="inner">
            	<ul class="dlarea">
                	<li class="name"><span>欢迎你， ${sessionScope.user.name}</span></li>
                	<li class="password"  style="padding-left:650px"><span>消息【<a href="user!msg?id=${sessionScope.user.id }">0</a>】</span></li>
                    <li class="password" ><span><a href="user!usercenter?id=${sessionScope.user.id }">个人中心</a></span></li>
                    <li class="name" style="padding-left:10px"><span><a style="color:red;" href="index!exit">安全退出</a></span></li>
                    </ul>
            </div>
           </div>
        </c:otherwise>
	</c:choose>
        <!-- 顶端结束 -->
          